<template>
<section class="wrapper">
  <myHeader :obj="myObj" @events="events"></myHeader>
  <main>
  <div class="wrap" @scroll="OrderData()">
    <section class="paddingT_10" v-for="item in datalist" @click="toHomeSwiper(item.AskToSeeId)">
      <div class="orderItem">
        <span class="delete" @click.stop="showdele(item.AskToSeeId)">删除</span>
        <div class="faceWrap">
          <i :style="{background:'url('+ item.HeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></i>
          <p>{{item.Name}}</p>
        </div>
        <div class="infoWrap">
          <h2>{{item.Title}}</h2>
          <h5 v-if="item.Describe">{{item.Describe}}</h5>
          <h5>已有{{item.ApplyCount?item.Appl:"0"}}位行家愿意约见</h5>
          <div class="fontWrap">
            <span>购买时间：{{item.CreateTime.slice(0,10)}}</span>
            <span>购买金额：￥{{item.Monery.toFixed(2)}}</span>
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="blackBg" v-if="isdelshow">
    <div class="isdele">
      <p>是否删除</p>
      <div class="isdeleCont">
        <span @click="removeinformation(itAskToSeeId)">删除</span>
        <span @click="isdelshow = !isdelshow">取消</span>
      </div>
    </div>
  </div>
    
  </main>
</section>
    
</template>
<script>
import myHeader from './base/myHeader';
import myOrder from './base/myOrder';
import Client from '../assets/js/common';
import Apis from '../assets/js/expertApi';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: '我的问题'
      },
      selected: "1",
      datalist:[],
      bol:false,
      allListData:{},
      num:0,
      page:0,
      loginData:null,
      isdelshow:false,
      itAskToSeeId:null,
    }
  },
  created(){
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.myData()
    })
  },
  methods: {
    events(i){
      if(i == 2){
        history.back();
      }
    },
    // 跳到页面
    toHomeSwiper(infoId) {
      this.$router.push({ path: "applyList", query: { Id:infoId } });
    },
    OrderData() {
      let tagList = document.querySelector('.wrap');
      let tagHeight = tagList.scrollHeight - tagList.clientHeight - 20;
      let tagScroll = tagList.scrollTop;
      if(tagHeight <= tagScroll  && this.bol) {
        this.bol = false;
        this.myData()
      }
    },
    async myData(){
      this.num++
      const res = await fetch(API.getmyquestionlist,{
        ...this.loginData[1],
        State:0,
        PageIndex:this.num,
      });
      this.allListData = res.Result.AskToSes;
      this.allListData.forEach(item => {
        this.datalist.push(item)
      });
      if(this.allListData.length == 10){
        this.bol = true;
      } else {
        this.bol = false;
      }
    },
    showdele(item) {
      this.isdelshow = !this.isdelshow;
      this.itAskToSeeId = item;
    },
    async removeinformation(item){
      await fetch(API.DeleteAskToSes,{
        ...this.loginData[1],
        AskToSeeId:item
      });
      window.location.reload();
      this.isdelshow = !this.isdelshow;
    },
  },
  watch:{
      
  },
  components: {
    myHeader,
    myOrder
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    height: 100%;
    .wrap{
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .blackBg{
        position: absolute;
        height: 100%;
        z-index: 55;
        background: rgba(0, 0, 0, .3);
        top: 0;
        left: 0;
        width: 100%;
        .isdele{
          position: absolute;
          top: 50%;
          left:50%;
          transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          background: #fff;
          width: 2.5rem;
          z-index: 55;
          padding: .1rem 0 0;
          p{
            font-size: .16rem;
            color: #333;
            text-align: center;
            line-height: 2;
          }
          .isdeleCont{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: .1rem;
            border-top: 1px solid #ddd;
            span{
              display: inline-block;
              font-size: .16rem;
              color: #666;
              flex-grow: 1;
              text-align: center;
              line-height: 2.5;
              &:nth-of-type(1){
                border-right: 1px solid #ddd;
              }
              &:active{
                background: #f5f5f5;
              }
            }
          }
        }
      }
      .paddingT_10 {
        padding-top: .1rem;
        position: relative;
        .orderItem{
          width: 3.35rem;
          background: white;
          border-radius: .04rem;
          margin: 0 auto;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          padding: .1rem;
          position: relative;
          .delete{
            position: absolute;
            top: .05rem;
            right: .1rem;
            color: #FF0000;
            font-size: .12rem;
            padding: .05rem .1rem;
            border: 1px solid #FF0000;
            border-radius: .05rem;
          }
          .faceWrap{
            i{
              display: block;
              height: .6rem;
              width: .6rem;
              border-radius: 50%;
            }
            p{
              text-align: center;
              font-size: .12rem;
              color: #333;
              margin-top: .05rem;
            }
          }
          .infoWrap{
            padding-left: .1rem;
            h2{
              color: #333;
              font-size: .14rem;
              font-weight: normal;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:1;
              overflow: hidden;
            }
            h5{
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:1;
              overflow: hidden;
              margin: 0.09rem 0 0;
              font-size: .12rem;
              color: #B3B3B6;
              font-weight: normal;
            }
            .fontWrap{
              margin-top: .09rem;
              span{
                font-size: .12rem;
                color: #B3B3B6;
                &:nth-of-type(2){
                  margin-left: .2rem;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<style>
   .myNavbar {
    display: block;
    justify-content: space-around;
    overflow: hidden;
    padding: 0 .15rem;
    box-sizing: border-box;
    background: #FAFAFA;
    position: relative;
    z-index: 2;
  }
  .mint-navbar .myNav2 {
    display: block;
    width: .85rem;
    float: left;
    margin: 0 .4rem;
  }
  .mint-navbar .is-selected {
    border-bottom: 3px solid #39393D!important;
  }
  .mint-navbar .myNav2 .mint-tab-item-label {
    font-size: .14rem;
  }
  .mint-navbar .is-selected .mint-tab-item-label {
    color: #39393D;
    font-weight: 600;
    font-size: .14rem;
  }
</style>